<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="文件名称" prop="fileName">
                <a-input v-model.trim="form.fileName" placeholder="请填写文件名称"/>
            </a-form-model-item>
            <!-- <a-form-model-item label="文件类型" prop="fileType">
                <a-select v-model="form.fileType" showSearch placeholder="请选择文件类型">
                    <a-select-option :value="item.type" v-for="item in fileTypes" :key="item.type">{{item.name}}</a-select-option>
                </a-select>
            </a-form-model-item> -->
            <a-form-model-item label="所属部门" prop="deptId">
                <!-- <a-cascader
                    :options="deptList"
                    v-model="form.deptId"
                    :fieldNames="{ label: 'deptName', value: 'deptId', children: 'children' }"
                    placeholder="请选择部门" /> -->
                <a-tree-select
                    v-model="form.deptId"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="deptList"
                    :replaceFields="{children:'children',
                    title:'deptName',
                    key:'deptId',
                    value: 'deptId' }"
                    placeholder="请选择部门">
                </a-tree-select>
            </a-form-model-item>
            <a-form-model-item label="文件" prop="fileUrl">
                <upload-file :url="form.fileUrl" :name="form.name" @upload="upload" @delete="deleteFile"/>
            </a-form-model-item>
            <a-form-model-item label="文件备注" prop="file">
                <a-textarea placeholder="请输入备注" :max-length="100" v-model="form.comments" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import {fileTypes} from '../dictionary'
import UploadFile from './upload-file.vue'
import { addInfo, updateInfo } from '@/api/system/file';
import {deepClone} from '@/utils'
import { mapState } from 'vuex';

export default {
    name: 'UserInfo',
    components:{
        UploadFile
    },
    props: {
        info: {
            type: Object,
            default: () => {}
        },
        deptList:{
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            loading: false,
            rules,
            title: '文件信息',
            fileTypes,
            form: {
                fileName: '',
                fileUrl:'',
                name:'',
                fileType:'',
                owener:"",
                deptId:[],
                comments:''
            },
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 20 }
            },
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    created() {
        this.form.owener = this.accountInfo.userName
        this.form = { ...this.form, ...this.info}
        // let {deptId=''} = this.info;
        // if(deptId){
        //     let deptList = deepClone(this.deptList)
        //     var filter = deptList.filter((item)=>{
        //         return this.filterDeptData(item,deptId);
        //     });
        //     let deptIds = this.getDeptId(filter)
        //     this.form.deptId = deptIds;
        // }
    },
    methods: {
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = null;
                        this.loading = true;
                        let form = deepClone(this.form);
                            // form.deptId = form.deptId[form.deptId.length-1]
                        if (form.id) {
                            res = await updateInfo(form);
                        } else {
                            res = await addInfo(form);
                        }
                        this.$emit('submit');
                    } finally {
                        this.loading = false
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //取消
        cancel() {
            this.$emit('cancel');
        },
        upload(e){
            let {imgUrl,name} = e;
            this.form.name = name;
            this.form.fileUrl = imgUrl;
            this.form.fileType = name.substring(name.lastIndexOf('.')+1)
        },
        deleteFile(){
            this.form.name = '';
            this.form.fileUrl = '';
        },
        getDeptId(data){
            let res = []
            data.map(item=>{
                res.push(item.deptId);
                if(item.children){
                    return res = [...res,...this.getDeptId(item.children)]
                }
            })
            return res
        },
        filterDeptData(item,deptId){
            if(item.deptId==deptId) return true;
            if(item.hasOwnProperty("children")){
                item.children = item.children.filter((child)=>{
                    if(child.deptId==deptId){
                        return child.deptId==deptId;
                    }else if(child.hasOwnProperty("children")){
                        return this.filterDeptData(child,deptId);
                    }
                })
                if(item.children.length > 0){
                    return true;
                }
            }else{
                return child.deptId==deptId;
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.title{
    font-size: 12px;
    color: #333;
}
.transfer_box{
    margin-top: 10px;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: $primary-color;
    border-color: $primary-color;
}
::v-deep .el-button--primary.is-disabled,
::v-deep .el-button--primary.is-disabled:active,
::v-deep .el-button--primary.is-disabled:focus,
::v-deep .el-button--primary.is-disabled:hover{
    background-color: rgba($color: $primary-color, $alpha: .7);
    border-color: rgba($color: $primary-color, $alpha: .7);
}
::v-deep .el-button--primary{
    background: $primary-color;
    border-color: $primary-color;
}
::v-deep .el-checkbox__inner:hover,
::v-deep .el-input__inner:focus,
::v-deep .el-checkbox__inner:focus{
    border-color: $primary-color;
}
</style>
